<h1>Sync will be back soon, I promise ;-) </h1>

<div ng-controller="SyncCtrl" ng-if="getSetting('sync.supported')">
	<h1>Storage sync</h1>

  <strong style='white-space:nowrap; display:block;'>{{'SETTINGS/DEFAULT/sync/desc'|translate}}</strong>
      <p class="label label-success" ng-show="getSetting('storage.sync')">{{'COMMON/enabled/lbl'|translate}}</p>
      <p class="label label-danger" ng-show="!getSetting('storage.sync')">{{'COMMON/disabled/lbl'|translate}}</p>

<ul class="list-unstyled">
        <li>
          <p><strong>{{'SETTINGS/DEFAULT/sync-push/hdr'|translate}}</strong> {{'SETTINGS/DEFAULT/sync-push/desc'|translate}}</p>
        </li><br>
        <li style="padding-top:4px">
          <p ng-show="!getSetting('storage.sync')">{{'SETTINGS/DEFAULT/sync-doit/desc'|translate}}</p>
          <p ng-show="getSetting('storage.sync')">{{'SETTINGS/DEFAULT/sync-dont/desc'|translate}}</p>
          <button ng-show="!getSetting('storage.sync')" ng-click="enableSync()" class="btn btn-success">{{'SETTINGS/DEFAULT/sync-doit/btn'|translate}}</button>
          <button ng-show="getSetting('storage.sync')" ng-click="disableSync()" class="btn btn-danger">{{'SETTINGS/DEFAULT/sync-dont/btn'|translate}}</button>
        </li>
      </ul>

	<h2 style="float: right; margin-top: -40px;"> Current status: {{sync.isSyncing ? 'Syncing' : 'Not Syncing'}}</h2>

	<h3>Registered Sync targets:</h3>
	<hr>
	<div ng-repeat="target in targets">
		<h1>{{ target.name }} </h1>
		<strong>Last sync: </strong> {{ target.lastSync }}<br>
		<strong>Status:</strong> {{ target.status }} {{ target.statusMessage }}<br>
		<strong>Enabled: </strong> {{ target.isEnabled() ? 'Yes' : 'No' }}<br>
		<button class="btn btn-xs btn-info" ng-click="target.sync()">Sync now</button>
		<button class="btn btn-xs btn-info" ng-click="read(target)">Read</button>
		<button class="btn btn-xs btn-info" ng-click="target.write()">Write</button><br>

		<button class="btn btn-xs btn-success" ng-click="compare(target)">Compare</button>


		<button class="btn btn-xs btn-info" ng-click="target.disable()">Disable</button>
		<button class="btn btn-xs btn-info" ng-click="target.enable()">Enable</button>

		<h2>Local series not in remote storage ({{target.nonRemote.length}})</h2>
		<ul>
		<li ng-repeat="show in target.nonRemote" ng-if="!show.title">{{ show + ' (loading)'}}</li>
		</ul>
		<serieheader ng-repeat="serie in target.nonRemote" style='display:inline-block;margin:5px;cursor:pointer' data="serie" no-overview="1" mode="poster" ng-click="selectSerie(serie)">
		    <em class="earmark" ng-show="isAdded(serie.trakt_id)"><i class='glyphicon glyphicon-ok'></i></em>
		    <em class="earmark adding" ng-show="isAdding(serie.trakt_id)"><loading-spinner></loading-spinner></em>
		 </serieheader>

		 <h2>Remote series not in local storage ({{target.nonLocal.length}})</h2>
		<ul>
			<li ng-repeat="show in target.nonLocal" ng-if="!show.title">{{show + ' (loading)'}}</li>
		</ul>
		<serieheader ng-repeat="serie in target.nonLocal" style='display:inline-block;margin:5px;cursor:pointer' data="serie" no-overview="1" mode="poster" ng-click="selectSerie(serie)">
		    <em class="earmark" ng-show="isAdded(serie.trakt_id)"><i class='glyphicon glyphicon-ok'></i></em>
		    <em class="earmark adding" ng-show="isAdding(serie.trakt_id)"><loading-spinner></loading-spinner></em>
		 </serieheader>

		<h2>All Series in remote storage engine {{target.name}} ({{target.series.length}})
		<button class="btn btn-warning" ng-show="!showAll" ng-click="showAll = true">Show</button>
		<button class="btn btn-warning" ng-show="showAll" ng-click="showAll = false">Hide</button>
		</h2>
		<serieheader ng-if="showAll" ng-repeat="serie in target.series" style='display:inline-block;margin:5px;cursor:pointer' data="serie" no-overview="1" mode="poster" ng-click="selectSerie(serie)">
		    <em class="earmark" ng-show="isAdded(serie.trakt_id)"><i class='glyphicon glyphicon-ok'></i></em>
		    <em class="earmark adding" ng-show="isAdding(serie.trakt_id)"><loading-spinner></loading-spinner></em>
		 </serieheader>


	</div>

</div>
